<!--头部公共部分-->
{include file="common/header" /}

<div class="x-nav">
      <span class="layui-breadcrumb">
        <a>首页</a>
        <a>系统</a>
        <a>
          <cite>审批列表</cite></a>
      </span>
	<a class="layui-btn layui-btn-xs layui-btn-small" style="float:right;margin-top: 10px;"
	   href="javascript:location.replace(location.href);" title="刷新">
		<i class="layui-icon layui-icon-refresh"></i> </a>
</div>
<div id="wodekehu" class="x-body" class="clear:both;">
	<div class="site-demo-button" lay-filter="selBtn" id="typeclass">
		<button class="layui-btn site-demo-active layui-btn-warm" id="no_approval" data-type="no_approval">待审批</button>
		<button class="layui-btn site-demo-active" id="approved" data-type="approved">已审批</button>
	</div>
	<div class="layui-row"
		 style="padding-left:20px;margin-top:20px;border-left:1px solid #e5e5e5;border-right:1px solid #e5e5e5;">
		<div class="layui-form layui-col-md12 x-so layui-form-pane">
			<div class="layui-input-inline">
				<input type="text" style="width: auto;" name="day"  id="searchday" placeholder="选择日期范围" autocomplete="off" class="layui-input">
			</div>
			<div class="layui-input-inline">
				<select name="type">
					<option value=""></option>
					<option value="1">同事</option>
					<option value="2">学员</option>
					<option value="3">自己</option>
				</select>
			</div>
			<div class="layui-input-inline">
				<button class="layui-btn" id="search">
					<i class="layui-icon layui-icon-search"></i>筛选</button>
				<button class="layui-btn layui-btn-danger" id="clear">
					<i class="layui-icon"></i>重置</button>
			</div>
		</div>
	</div>
	<div id="div">
		<table class="layui-table" id="datalist" lay-filter="Event"></table>
	</div>
	<script type="text/html" id="name">
		<a href="/admin/System/approval_rejection/id/{{d.id}}"  class="layui-table-link">{{ d.approval_name }}</a>
	</script>
	<input type="hidden" value="all" id="type_data">
</div>
<!--底部公共部分-->
{include file="common/footer" /}
<script>
	layui.use(['table', 'laydate','element','upload', 'layer','form'], function () {
		let table = layui.table,
			laydate = layui.laydate,
			layer = layui.layer,
			element = layui.element,
			$ = layui.$;
		laydate.render({
			elem: '#searchday', //指定元素
			range: true,
			trigger: 'click',
			value: '',
			btns: ['now', 'confirm'],
			ready: function(date) {
				//得到初始的日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
			},
			done: function(value, date, endDate) {
			}
		});

		let loading = layer.load();
		//数据表格 方法级渲染
		let tableIns = table.render({
			elem: '#datalist'
			, url: '{:url("System/approval")}'
			, method: 'POST'
			, loading: true
			, parseData: function (res) { //res 即为原始返回的数据
				if (res.code === 1) {
					res.code = 0;
				} else {
					res.code = -1;
				}
				return {
					"code": res.code, //解析接口状态
					"msg": res.message, //解析提示文本
					"count": res.data.total, //解析数据长度
					"data": res.data.data //解析数据列表
				};
			},
			cols: [[
				{field: 'approval_name', title: '审批标题',style:'color:#01AAED;font-weight: bold;',width: 150, align: 'center', templet: '#name'},
				{field: 'user_name', title: '申请人',width: 150, align: 'center'},
				{field: 'approver_name', title: '审批人',minWidth: 200, align: 'center'},
				{field: 'type_text', title: '类型', width: 100, align: 'center'},
				{field: 'status_text', title: '审批状态', width: 100, align: 'center'},
				{field: 'approval_time', title: '审批时间', width: 170, align: 'center'},
			]]
			, page: true
			, done: function () {
				layer.close(loading);
			}
		});
		//订单分类选择
		$('.site-demo-active').on('click', function () {
			$('#typeclass').find('button').removeClass('layui-btn-warm');
			$(this).addClass('layui-btn-warm');
			let type = $(this).data('type');
			$("#type_data").val(type);  //数据类型
			tableIns.reload({
				where: {
					'type': type
				}
			});
		});
		//监听工具条
		table.on('tool(Event)', function (obj) {
			let data = obj.data; //获得当前行数据
			let layEvent = obj.event; //获得 lay-event 对应的值
		});
		//搜索项
		$('#search').click(function () {
			var field = {};
			field.stype = $('select[name=type] option:selected').val();
			field.day = $('input[name=day]').val();
			field.type = $("#type_data").val();
			console.log(field);
			tableIns.reload({
				where: field,
				method: 'POST',
				page: {
					curr: 1 //重新从第 1 页开始
				}
			});
		});//清除
		$('#clear').click(function () {
			// $('#typeclass').find('button').removeClass('layui-btn-warm');
			// $("#no_approval").addClass('layui-btn-warm');
			$('.layui-input').each(function (index, element) {
				$(element).val('');
			})
			tableIns.reload({
				where: {
					'day': '',
					'type': $("#type_data").val(),
					'stype': ''
				},
				page: {
					curr: 1 //重新从第 1 页开始
				}
			});
		});

	});
</script>